<template>
	<div class="ele-login">
		<div class="login-board">
			<div class="login-title">
				登 录
			</div>
			<form>
				<div class="form-row">
					<input type="text" placeholder="请输入用户名" v-model="loginBean.username"/>
				</div>
				<div class="form-row">
					<input type="password" placeholder="请输入密码" v-model="loginBean.password"/>
				</div>
				<div class="form-row">
					<input type="button" value="登录" @click="loginButtonClick"/>
					<input type="reset" value="重置" />
				</div>
			</form>
		</div>
	</div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
	name: 'login',
	data(){
		return {
			loginBean:{
				username: 'admin',
				password: 'admin'
			}
		}
	},



	methods:{

	  ...mapMutations(['setUsername','setUserId','setRoleIds','setToken']),

		/**
		 *   登录按钮点击事件方法
		 */
		loginButtonClick(){
      this.api.__api__login(this.loginBean)
        .then(data=>{
            console.log("data="+JSON.stringify(data));
            this.setUsername(data.data.username);
            this.setToken(data.data.token);
            this.setUserId(data.data.userId);
            this.setRoleIds(data.data.roleIds);
            this.$router.push('/home');
        })
		}
	}
}
</script>

<style scoped>
	.ele-login{
		width:100%;
		height:100%;
		display: flex;
		justify-content: center;
		align-items: center;
    background-color: red;
    background-image: url(../assets/images/reg_bg.jpg);

	}

	.login-board{
		width: 500px;
		height:300px;
		background-color: white;
		opacity: 0.8;
		border-radius: 5px;
	}

	.login-title{
		text-align: left;
		padding: 10px;
		border-bottom: 1px solid gray;
		font-weight: bolder;
		font-size: 18px;

	}
	form{
		width:100%;
		height: 100%;

		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form-row{
		width:60%;
		height:40px;

		margin: 10px;
		display: block;
		text-align: center;
	}

	.form-row>input[type='text'],.form-row>input[type='password']{
		height: 30px;
		width: 200px;
		border: 0px solid gray;
		border-bottom: 1px solid gray;
	}

	.form-row>input[type='button'],.form-row>input[type='reset']{
		width: 60px;
		height:30px;
		margin:10px;
		border: 0px solid black;
		border-radius: 3px;
		color: white;
		font-size: 16px;


	}

	input[type='button']{
		background-color: royalblue;
	}

	input[type='reset']{
		background-color: gray;
	}

</style>
